<template>
	<view class="page ">

		<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" height="1000rpx"
			@finsh="subFinsh"></filter-popup>
		<view class="">
			<view class="swiper-wrap">
				<swiper style="height: 100%;" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item v-for="(item,indesx) in gift" :key="indesx" @click="goPage(item.url)">
						<view class="" style="padding:10rpx; height: 100%;" >
							<!-- <image src="../../static/logo.png" mode=""></image> -->
							<image :src="item.image" mode=""></image>
						</view>

					</swiper-item>

				</swiper>
			</view>
			<view class="">
				<view class="index-coupon">
					<scroll-view scroll-x="true" class="index-coupon-view">
						<view class="index-coupon-msg" v-for="(item,index ) in classList" :key="index">
							<view class="index-coupon-msg-msg" :class="activeTabIndex==index?'activeTab':''"
								@click="manuBtn(index,item)">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<view class="classify-wrap" @click="popup.filter = true">
						<image src="@/static/com/icon_fl.png" mode=""></image>

					</view>
				</view>
				<view class="" style="width: 90%; margin: 0 auto;" v-if="pointList.length!==0">
					<fosterList :bastList="pointList" type="1"></fosterList>
				</view>
				<view class="" style="width: 90%; margin: 0 auto;" v-else>
					<noData></noData>
				</view>



			</view>



		</view>
<!-- 		<view class="car">
			<view class="car-wrap">
				<view class="car-num">
					99+
				</view>
				<image src="@/static/com/icon_car.png" mode=""></image>
				
			</view>
			
		</view> -->
		<uni-popup ref="openClassify" type="top">
			<view class="openClassify-wrap">
				<view class="openClassify-mag" :class="openClassifyIndex==index?'openClassify':''"
					v-for="(item,index ) in 100">
					<text @click="openClassifyBtn(index)">
						亲子游续约
					</text>

				</view>
			</view>
		</uni-popup>
		<home></home>
	</view>
</template>
<script>
	import noData from '@/components/com/noData.vue'
	import {
		getIndexAdPage,
		getCategoryList,
		getProductRangeList
	} from '@/api/togeterRich/index.js'
	import {
		getSearchKeyword,
		getProductslist,
		getProductHot,
		getSearchHistory,
		getSerchClass,
		getSerchDel
	} from '@/api/store.js';
	import home from '@/components/home/index.vue'
	import FilterPopup from "@/pagesA/pointReward/filter-popup/filter-popup";
	import fosterList from "@/pages/index/components/fosterList.vue"
	export default {
		components: {
			fosterList,
			FilterPopup,
			noData,
			home
		},
		data() {
			return {
				
				cid: '',
				pointList: [],
				popup: {
					filter: false,
				},
				//筛选表单数据
				filterData: [{
						children: false, //是否有子项
						title: "排序",
						key: "sort", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: [{
								title: "销量排序",
								id: 1,
								value: 'salesOrder',
							},
							{
								title: "价格排序",
								id: 2,
								value: "priceOrder",
							}
						],
					},
					{
						children: false, //是否有子项
						title: "积分区间",
						key: "range", //键名 接收对象名字
						keyValue: "value", //获取的值是哪个
						isRadio: true, //是否单选 否则多选
						data: []
					}
				], //筛选数据

				filterForm: {}, //选中的表单

				activeTabIndex: 0,
				openClassifyIndex: 0,


				constants: {},
				classList: [],
				priceOrder: '',
				salesOrder: '',
				range: '',
				gift: []
			};
		},
		onLoad() {
			this.init()
			this.categoryList()
			this.getGift()
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			getGift() {
				getIndexAdPage("2").then(res => {
					console.log(res, 'res')
					this.gift = res.data
					// if (res.data.length != 0) {
					// 	this.$refs.giftPup.open()
					// }

				})

			},
			categoryList() {
				let newList = []
				getProductRangeList().then(res => {
					console.log("积分区间", res)
					console.log("积分区间", res)
					this.filterData[1].data = res.data
					res.data.map((ress, index) => {
						let data = {
							id: index,
							title: ress,
							value: ress
						}
						newList.push((data))
					})
					this.filterData[1].data = newList
				})
				let datas = {
					children: null,
					id: 0,
					name: "全部"
				}
				getCategoryList().then(res => {
					this.classList = res.data
					this.classList.unshift(datas)
					console.log(res, 'fenlei')
				})
			},

			init() {

				this.pointList = []
				let data = {
					isIntegral: false,
					cid: this.cid,
					priceOrder: this.priceOrder,
					salesOrder: this.salesOrder,
					range: this.range
				}
				getProductslist(data).then(res => {
					this.pointList = this.pointList.concat(res.data.list)

				})
			},
			subFinsh(e) {

				if (e.sort[0] == 'priceOrder') {
					this.priceOrder = "ASC"
				}
				if (e.sort[0] == 'salesOrder') {
					this.salesOrder = "DES"
				}
				this.range = e.range[0] || ''
				this.init()
				// console.log("this.filterForm :>> ", this.filterForm);
				// console.log("返回参数数组 和 this.filterForm 相等 :>> ", e);
			},
			openClassify() {
				this.$refs.openClassify.open()
			},
			openClassifyBtn(index) {
				this.openClassifyIndex = index
				this.$refs.openClassify.close()
			},
			manuBtn(index, item) {
				console.log(index)
				this.cid = item.id
				this.activeTabIndex = index
				this.init()
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import 'com/index.css';
	@import '@/com/css/common.css';

	.swiper-wrap {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.car {
		position: fixed;
		bottom: 100rpx;
		right: 50rpx;
		background: #fff;
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;

		.car-wrap {
			position: relative;

			.car-num {
				font-size: 24rpx;
				background: #FF0000;
				border-radius: 100rpx;
				position: absolute;
				top: -72%;
				padding: 3rpx 8rpx;
				color: #fff;
			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

	}

	.openClassify {
		background: #F0F9F5;
		color: $maincolor !important;
		opacity: 1;
		border: 1px solid $maincolor;
	}

	.openClassify-wrap {
		width: 100%;
		height: 600rpx;
		/* height: 100%; */
		font-size: 24rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 0 0 30rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		overflow-x: scroll;

		.openClassify-mag {
			width: 20%;
			text-align: center;
			background: #F5F5F5;

			/* background: radial-gradient(black, transparent); */
			margin: 17rpx;
			padding: 8rpx 6rpx;
			color: #000;
			border-radius: 100rpx;
		}
	}

	.index-coupon {

		padding: 13px 20rpx;
		border-radius: 10rpx;
		// background: red;
		position: relative;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: baseline;

		.classify-wrap {
			color: $maincolor;
			position: absolute;
			right: 20px;
			top: 38%;
			font-size: 24rpx;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;

			}
		}


		.index-coupon-view {
			white-space: nowrap;
			padding: 15rpx 0;
			width: 90%;

			.index-coupon-msg {
				.index-coupon-msg-msg {
					color: $maincolor;
					padding: 8rpx 20rpx;
					color: #000;

				}

				display: inline-block;
				opacity: 1;
				margin-right: 20rpx;


			}
		}


	}

	.activeTab {
		border-bottom: 4rpx solid $maincolor;
		color: $maincolor;
	}

	.swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}

		;
	}
</style>